<template>
  <el-dialog v-model="visible" title="内容详情" width="600px" class="dynamic-info-dialog">
    <div class="info-content">
      <el-descriptions :column="1" label-class-name="info-label">
        <el-descriptions-item label="动态ID">
          {{ info.recommendId }}
        </el-descriptions-item>
        <el-descriptions-item label="发布者id">
          {{ info.buyerUserId || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="动态内容">
          <div class="content-preview">
            <!-- 图文内容 -->
            <div v-if="info.fileType === 1 && info.fileUrl" class="image-content">
              <el-image
                v-for="(url, index) in info.fileUrl?.split(',')"
                :key="index"
                :src="url"
                fit="cover"
                class="content-image"
                :preview-src-list="info.fileUrl?.split(',')"
                :initial-index="index"
                :hide-on-click-modal="true"
              />
              <div class="content-text">{{ info.remark }}</div>
            </div>
            <!-- 视频内容 -->
            <div v-else-if="info.fileType === 2 && info.fileUrl" class="video-content">
              <video :src="info.fileUrl" controls class="content-video"></video>
              <div class="content-text">{{ info.remark }}</div>
            </div>
            <!-- 纯文本内容 -->
            <div v-else class="text-content">
              <div class="content-text">{{ info.remark }}</div>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="动态分类">
          <span v-if="info.fileType === 1">图文</span>
          <span v-else-if="info.fileType === 2">视频</span>
          <span v-else>纯文本</span>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { ContentService, ContentItem } from '@/api/contentApi'

  const visible = ref(false)

  const defaultInfo = {
    recommendId: '',
    content: '',
    remark: '',
    fileType: 1,
    fileUrl: ''
  }

  const info = ref({ ...defaultInfo })

  const getInfo = async (row: ContentItem) => {
    visible.value = true
    try {
      console.log('尝试获取动态详情成功')
      const { data } = await ContentService.contentInfo({ recommendId: row.recommendId })
      info.value = data
    } catch (error) {
      console.error('获取内容详情失败:', error)
    }
  }

  defineExpose({
    getInfo
  })
</script>

<style lang="scss" scoped>
  .dynamic-info-dialog {
    .info-content {
      padding: 20px;

      .content-preview {
        .image-content {
          display: flex;
          flex-direction: column;
          gap: 10px;

          .content-image {
            width: 80px;
            height: 80px;
            border-radius: 4px;
          }

          .content-text {
            margin-top: 10px;
            font-size: 14px;
            line-height: 1.5;
          }
        }

        .video-content {
          .content-video {
            width: 100%;
            max-width: 300px;
            height: auto;
          }

          .content-text {
            margin-top: 10px;
            font-size: 14px;
            line-height: 1.5;
          }
        }
        
        .text-content {
          .content-text {
            font-size: 14px;
            line-height: 1.5;
          }
        }
      }
    }

    :deep(.info-label) {
      width: 100px;
      text-align: right;
    }
  }
</style>
